{%extends "VWCommonLoginBundle:Default:index.html.twig"%}

{% block stylesheets %}
<link href="{{ asset('bundles/vwcommonlogin/css/signin.css') }}" rel="stylesheet">
<link href="{{ asset('bundles/vwcommonlogin/css/jqueryui/jquery.ui.all.css') }}" rel="stylesheet">
{% endblock %}
{% block container %}

<div class="container">

    <form class="form-signin" method="post" action="{{path('vw_common_login_signup')}}">
        <h2 class="form-signin-heading">Please sign up</h2>
        {% if name is defined %}
        <div class="alert-info fade in text-center">
            <strong>Welcome {{name}}, {{msg}}.</strong>
        </div>
        {%endif%}
        {% if error is defined %}
        <div class="alert-dismissable fade in text-center">
            <strong>{{error}}</strong>
        </div>
        {%endif%}
        <input type="text" name="full_name" id="full_name" class="form-control" placeholder="Full Name...">
        <input type="text" name="gender" id="gender" class="form-control" placeholder="Gender...">
        <input type="text" name="dob" id="dob" class="form-control" placeholder="Date of Birth...">
        <input type="email" name="email" id="email" class="form-control" placeholder="Email address" autofocus required="required">
        <input type="password" name="password" id="password" class="form-control" placeholder="Password">
        <button class="btn btn-lg btn-primary btn-block" type="submit">Sign Up</button> <a href="{{path('vw_common_login_homepage')}}">Sign In</a>
    </form>

</div> <!-- /container -->
{% endblock %}

{% block javascripts %}
<script src="{{ asset('bundles/vwcommonlogin/js/jquery-1.9.1.js') }}"></script>
<script src="{{ asset('bundles/vwcommonlogin/js/jqueryui/jquery.ui.core.js') }}"></script>
<script src="{{ asset('bundles/vwcommonlogin/js/jqueryui/jquery.ui.widget.js') }}"></script>
<script src="{{ asset('bundles/vwcommonlogin/js/jqueryui/jquery.ui.datepicker.js') }}"></script>
<script>
	$(function() {
		$( "#dob" ).datepicker({
                        changeMonth: true,
                        changeYear: true,
                        yearRange: "-100:+0",
                        dateFormat: "yy-mm-dd"
		});
	});
</script>
{% endblock %}